<template>
  <page-layout title="企业账号管理">
    <a-row style="background: #fff; padding: 24px">
      <a-row type="flex" justify="space-between">
        <a-form layout="inline">
          <a-form-item label="关键字">
            <a-input v-model="listState.name" placeholder="请输入企业名称/手机号/联系人" allow-clear>
              <a-icon slot="prefix" type="user" />
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" icon="search" @click="onSearch">查询</a-button>
          </a-form-item>
        </a-form>
        <a-space>
          <a-button type="primary" icon="plus" @click="onAdd">添加登录账号</a-button>
          <a-button @click="onSend" :disabled="selectedRowKeys.length <= 0">批量发送邀请使用短信</a-button>
        </a-space>
      </a-row>
      <a-table class="roles-table" rowKey="id" :columns="masterColumns" :data-source="dataSource" :row-selection="rowSelection" :scroll="{x:true}" :pagination="{
                    current: listState.pageNum,
                    pageSize: listState.pageSize,
                    total: total,
                    showLessItems: true,
                    onChange: onPageChange,
                    onShowSizeChange: onSizeChange,
                }" style="margin-top: 20px">
        <template slot="operation" slot-scope="text, record">
          <a class="ant-dropdown-link" @click="onEdit(record)">编辑</a>
          <a-divider type="vertical" />
          <a-popconfirm title="确定要删除该角色吗?" ok-text="确定" cancel-text="取消" @confirm="onConfirmDelete(record.id)">
            <a class="ant-dropdown-link">删除</a>
          </a-popconfirm>
        </template>
      </a-table>
      <accountModal :accountModal="accountModal" @cancelModal="cancelModal" :nowAccount="nowAccount" :modalType="modalType"></accountModal>
    </a-row>
  </page-layout>
</template>

<script>
import { transferDate } from '@/utils/util'
import PageLayout from '@/layouts/PageLayout';
import { accountList, updateAccount, deleteAccount, addAccount, batchMessage } from '@/services/account.js';
import accountModal from './modal/loginAccountModal.vue';
export default {
  name: 'Error',
  components: { accountModal, PageLayout },
  data () {
    return {
      masterColumns: [
        {
          title: '企业名称',
          dataIndex: 'companyName',
          fixed: 'left',
          width: 200,
        },
        {
          title: '联系人',
          dataIndex: 'contacts',
        },
        {
          title: '手机号',
          dataIndex: 'mobile',
        },
        {
          title: '创建人',
          dataIndex: 'createBy',
        },
        {
          title: '更新时间',
          dataIndex: 'updateTime',
        },
        {
          title: '操作',
          dataIndex: 'operation',
          fixed: 'right',
          width: 150,
          scopedSlots: { customRender: 'operation' },
        },
      ],
      dataSource: [],
      selectedRowKeys: [],
      total: 0,
      accountModal: false,
      nowAccount: {},
      modalType: '',
      listState: {
        name: '',
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  computed: {
    rowSelection () {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: selectedRowKeys => {
          this.selectedRowKeys = selectedRowKeys;
        },
      };
    },
  },
  methods: {
    transferDate,
    /**
     * @description: 分页
     * @param {*} page
     * @param {*} pageSize
     * @return {*}
     */
    onPageChange (page, pageSize) {
      this.listState.pageNum = page;
      this.listState.pageSize = pageSize;
      this.accountList(this.listState);
    },
    onSizeChange (current, size) {
      this.listState.pageNum = 1;
      this.listState.pageSize = size;
      this.accountList(this.listState);
    },
    /**
     * @description: 账号分页列表
     * @param {*}
     * @return {*}
     */
    accountList (params) {
      accountList(params).then(res => {
        let { code, data, msg } = res.data;
        if (code == 200) {
          this.dataSource = data.content;
          this.dataSource.forEach(val => {
            val.updateTime = transferDate(val.updateTime, 2)
          });
          this.total = data.totalElements;
        } else {
          this.$message.error(msg);
        }
      });
    },
    onSearch () {
      this.accountList(this.listState);
    },
    /**
     * @description: 添加账号
     * @param {*}
     * @return {*}
     */
    addAccount (params) {
      addAccount(params).then(res => {
        let { code, data, msg } = res.data;
        if (code == 200) {
          this.$message.success('添加成功！');
          this.accountList(this.listState);
        } else {
          this.$message.error(msg);
        }
      });
    },
    onAdd () {
      this.modalType = '添加';
      this.nowAccount = {};
      this.accountModal = true;
    },
    /**
     * @description: 编辑账号
     * @param {*}
     * @return {*}
     */
    updateAccount (params) {
      updateAccount(params).then(res => {
        let { code, data, msg } = res.data;
        if (code == 200) {
          this.$message.success('修改成功！');
          this.accountList(this.listState);
        } else {
          this.$message.error(msg);
        }
      });
    },
    onEdit (item) {
      this.modalType = '编辑';
      this.nowAccount = item;
      this.accountModal = true;
    },
    /**
     * @description: 添加/编辑账号
     * @param {*} result
     * @return {*}
     */
    cancelModal (result) {
      let { success, data } = result;
      if (success == 'ok') {
        const params = {
          id: this.nowAccount.id,
          companyName: data.name.split('--')[0],
          companyId: data.name.split('--')[1],
          contacts: data.contact,
          mobile: data.mobile,
        };
        if (this.modalType == '添加') {
          this.addAccount(params);
        } else {
          this.updateAccount(params);
        }
      }
      this.accountModal = false;
    },
    /**
     * @description: 删除账号
     * @param {*}
     * @return {*}
     */
    deleteAccount (params) {
      deleteAccount(params).then(res => {
        let { code, msg } = res.data;
        if (code == 200) {
          this.$message.success('删除账号成功！');
          this.accountList(this.listState);
        } else {
          this.$message.error(msg);
        }
      });
    },
    onConfirmDelete (id) {
      this.deleteAccount({ id });
    },
    /**
     * @description: 批量发送短信
     * @param {*}
     * @return {*}
     */
    batchMessage (params) {
      batchMessage(params).then(res => {
        let { code, data, msg } = res.data;
        if (code == 200) {
          this.$message.success('发送短信成功！');
          this.selectedRowKeys = [];
        } else {
          this.$message.error(msg);
        }
      });
    },
    onSend () {
      const ids = this.selectedRowKeys.toString();
      this.batchMessage({ ids });
    },
  },
  mounted () {
    this.accountList(this.listState);
  },
};
</script>

<style scoped lang="less"></style>
